<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>忘记密码</title>
		<link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../css/resetPassword.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div class="sign">
			<img src="../img/login/云谷面试官.png" />
			<a href="../index.html">&nbsp;校园兼职系统</a>
		</div>
		<div class="sign_2">
			<img src="../img/login/公告-通知-07.png" />
			&nbsp;客户服务热线:123 456 7890
		</div>
		<div class="main">
			<div class="main_left">
				<img src="../img/resetPassword/缺省页-无权限.png" />
			</div>
			<div class="main_right">
				<div id="app">
					<div class="app_top">
						<div>
							忘记密码
						</div>
					</div>
					<div class="app_center">
						<div class="app_center_wrap">
							<div class="left">
								<img src="../img/register/账号.png" />
							</div>
							<div class="right">
								<input type="text" v-model="user.username" placeholder="账号" maxlength="8" minlength="2"
									title="最短支持2位,最长支持8位哦" />
							</div>
						</div>
						<div class="app_center_wrap">
							<div class="left">
								<img src="../img/resetPassword/Mobile-1.png" />
							</div>
							<div class="right">
								<input type="password" v-model="user.phone_number" placeholder="手机号" maxlength="11"
									/>
							</div>
						</div>
					</div>
					<div class="app_bottom">
						<div class="register_btn">
							<div class="register_btn_slave">
								<el-button class="success_btn" @click="reset()" type="success" round>重置密码</el-button>
							</div>
						</div>
						<div class="reset_btn">
							<a href="login.html">突然想起来了？</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="../js/axios-0.18.0.js"></script>
	<script src="../js/jquery-3.6.1.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				user: {
					username: '',
					password: '',
					phone_number: ''
				}
			},
			created() {
				this.user.username = ''
				this.user.password = ''
				this.user.phone_number = ''
			},
			methods: {
				reset(){
					var _this = this;
					var user = _this.user;
					if (user.username.length === 0 || user.phone_number.length ===0) {
						_this.$message.error('账号或手机号不能为空')
					} else if(user.username.length <2) {
						_this.$message.error('账号长度不低于2位')
					} else if(user.phone_number.length !== 11) {
						_this.$message.error('手机号长度必须为11位')
					} else {
						axios.post('/registers/checkUser',user).then((resp)=>{
							if (resp.data.data) {
								_this.openPrompt();
							} else{
								_this.$message.error('账号与手机号不匹配，请检查');
							}
						})
					}
				},
				openPrompt() {
					this.$prompt('请输入您的密码', '验证成功', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator (value) {
					          if (value == undefined) {
					            return '密码不能为空'
					          } else if (value.length === 0) {
					            return '密码不能为空'
					          } else if (!value.match('^[a-zA-Z0-9_\u4e00-\u9fa5]+$')) {
					            return '不支持特殊字符'
					          } else if (value.length > 12) {
					            return '密码不能大于12位'
					          } else if (value.length < 4){
								return '密码不能小于4位'
							  }
					        },
					inputErrorMessage: '密码格式不正确'
					}).then(({
						value
					}) => {
						this.user.password = value;
						this.openFullScreen2();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
				},
				openFullScreen2() {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(() => {
						loading.close();
						axios.put("/registers/upUser",this.user).then((resp)=>{
							if (resp.data.data){
								this.$message.success('密码重置成功，快去登录吧');
							} else {
								this.$message.error('修改错误了，联系管理员')
							}
						})
					}, 1500);
				}
			}
		})
	</script>
</html>